<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <script src="../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <!-- 引入组件库 -->
    <script src="../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" style="box-shadow: none;">
        <div class="indexbox" style="background-color: #F6F6F6;">
            
            <!-- 整体数据统计 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="index_count color_1">
                        <p>3</p>客户数
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="index_count color_2">
                        <p>13</p>订单数
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="index_count color_3">
                        <p>119</p>商品数
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="index_count color_4">
                        <p>265,800</p>总金额
                    </div>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <!-- 堂食统计 -->
                    <div class="box">
                        <div class="box-title"><h2>堂食</h2></div>
                        <div class="box-content">
                            <ul class="incount_list">
                                <li><p>119</p>今日客户数</li>
                                <li><p>4</p>今日订单数</li>
                                <li><p>21</p>Total</li>
                            </ul>
                        </div>
                    </div><!-- 堂食统计 end -->
                </el-col>
                <el-col :span="12">
                    <!-- 外卖统计 -->
                    <div class="box">
                        <div class="box-title"><h2>外卖</h2></div>
                        <div class="box-content">
                            <ul class="incount_list">
                                <li><p>1</p>今日客户数</li>
                                <li><p>4</p>今日订单数</li>
                                <li><p>21</p>Total</li>
                            </ul>
                        </div>
                    </div><!-- 外卖统计 end -->
                </el-col>
            </el-row>


            <el-row :gutter="20">
                <el-col :span="12">
                    <!-- 订单分析 -->
                    <div class="box">
                        <div class="box-content no-padding">
                            <div class="index_chart_box">
                                <h2>订单分析</h2>
                                <div id="chart" class="index_chart"></div>
                            </div>
                        </div>
                    </div><!-- 订单分析 end -->
                </el-col>
                <el-col :span="12">
                    <!-- 客户分析 -->
                    <div class="box">
                        <div class="box-content no-padding">
                            <div class="index_chart_box">
                                <h2>客户分析</h2>
                                <div id="chart2" class="index_chart"></div>
                            </div>
                        </div>
                    </div><!-- 客户分析 end -->
                </el-col>
            </el-row>
        </div>
    </div>
</div>
</body>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<script>
    new Vue({
        el: "#app",
        mounted: function () {
            this.drawLine();  //echart
        },
        methods: {
            drawLine: function () {
                // 订单分析图表数据配置
                var myChart = echarts.init(document.getElementById('chart')),
                    option = {
                        legend: {
                            bottom : '0',
                            left: 'center',
                            textStyle: {
                                color: '#222',
                                fontSize: "14"
                            },
                            data: ['订单金额', '订单数']
                        },
                        xAxis: [
                            {
                                boundaryGap: false,
                                axisLabel: {
                                    margin: '15'
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#8CA0B3',
                                        width: 1
                                    }
                                },
                                data: ['01/02', '01/04', '01/06', '01/08', '01/10', '01/12', '01/14']
                            }
                        ],
                        tooltip: {
                            textStyle: {
                                fontSize: "14",
                            },
                            padding: 14,
                            trigger: 'axis',
                            formatter: function (datas) {
                                var date = new Date;
                                var year = date.getFullYear();
                                var res = year + '/' + datas[0].name + '<br/>',
                                    val;
                                for (var i = 0,
                                         length = datas.length; i < length; i++) {
                                    val = (datas[i].value);
                                    res += datas[i].seriesName + '：' + val + '<br/>';
                                }
                                return res;
                            }
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '订单金额',
                                nameTextStyle: {
                                    color: '#222',
                                    fontSize: "14"
                                },
                                nameGap: 25,
                                position: 'left',
                                axisLine: {
                                    lineStyle: {
                                        color: '#8CA0B3'
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#697B8C'
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#eee']
                                    }
                                }
                            },
                            {
                                type: 'value',
                                name: '订单数',
                                nameTextStyle: {
                                    color: '#222',
                                    fontSize: "14"
                                },
                                nameGap: 25,
                                position: 'right',
                                axisLine: {
                                    lineStyle: {
                                        color: '#8CA0B3'
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#697B8C'
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#eee']
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '订单金额',
                                type: 'line',
                                smooth: true,
                                textStyle: {
                                    color: '#222',
                                    fontSize: "14"
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#3366CC'
                                    }
                                },
                                data: [1022.00, 1212.12, 2178.50, 2223.87, 3067.54, 4034.12, 5045.00],
                                // markPoint: {
                                //     data: [
                                //         {type: 'max', name: '最大值'},
                                //         {type: 'min', name: '最小值'}
                                //     ]
                                // },
                                // markLine: {
                                //     data: [
                                //         {type: 'average', name: '平均值'}
                                //     ]
                                // }
                            },
                            {
                                name: '订单数',
                                type: 'line',
                                yAxisIndex: 1,
                                smooth: true,
                                itemStyle: {
                                    normal: {
                                        color: '#222'
                                    }
                                },
                                data: [30, 42, 30, 50, 90, 30, 10]
                            },
                        ]
                    };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);

                // 客户分析图表数据配置
                var myChart2 = echarts.init(document.getElementById('chart2')),
                    option2 = {
                        legend: {
                            bottom : '0',
                            left: 'center',
                            textStyle: {
                                color: '#222',
                                fontSize: "14"
                            },
                            data: ['新客户', '总客户']
                        },
                        xAxis: [
                            {
                                axisLine: {
                                    lineStyle: {
                                        color: '#8CA0B3',
                                        width: 1
                                    }
                                },
                                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                            }
                        ],
                        tooltip: {
                            textStyle: {
                                fontSize: "14",
                            },
                            padding: 14,
                            trigger: 'axis',
                            formatter: function (datas) {
                                var date = new Date;
                                var year = date.getFullYear();
                                var res = year + '年' + datas[0].name + '<br/>',
                                    val;
                                for (var i = 0,
                                         length = datas.length; i < length; i++) {
                                    val = (datas[i].value);
                                    res += datas[i].seriesName + '：' + val + '<br/>';
                                }
                                return res;
                            }
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '新客户',
                                nameTextStyle: {
                                    color: '#222',
                                    fontSize: "14"
                                },
                                nameGap: 25,
                                position: 'left',
                                axisLine: {
                                    lineStyle: {
                                        color: '#8CA0B3'
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#697B8C'
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#eee']
                                    }
                                }
                            },
                            {
                                type: 'value',
                                name: '总客户',
                                nameTextStyle: {
                                    color: '#222',
                                    fontSize: "14"
                                },
                                nameGap: 25,
                                position: 'right',
                                axisLine: {
                                    lineStyle: {
                                        color: '#8CA0B3'
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#697B8C'
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#eee']
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '新客户',
                                type: 'line',
                                smooth: true,
                                textStyle: {
                                    color: '#222',
                                    fontSize: "14"
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#ffbf05'
                                    }
                                },
                                data: [30, 42, 30, 50, 90, 30, 10, 12, 32, 56, 23, 12]
                            },
                            {
                                name: '总客户',
                                type: 'bar',
                                yAxisIndex: 1,
                                smooth: true,
                                itemStyle: {
                                    normal: {
                                        color: '#13bbd0'
                                    }
                                },
                                data: [1230, 1242, 1330, 1350, 1390, 1430, 1510, 1591, 1643, 1702, 1810, 1818]
                            },
                        ]
                    };
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option2, true);
            }
        }
    });
</script>
</html>